<template>
  <div id="app">
    <!-- 3. 应用组件标签 -->
    <MyHeader />


    
    <!-- data return {}  得到新的 {count:66} -->
    <MyMain />
    <!-- data return {}  得到新的 {count:66} -->
    <MyMain />
    <!-- data return {}  得到新的 {count:66} -->
    <MyMain />


    
    <MyFooter />
  </div>
</template>

<script>
  // 引用组件
  import MyHeader from './components/MyHeader.vue'
  import MyMain from './components/MyMain.vue'
  import MyFooter from './components/MyFooter.vue'
  export default {
    // new Vue({})
    // 没写data
    // 2. 注册组件
    components:{
      // MyHeader:MyHeader
      MyHeader,
      MyMain,
      MyFooter
    }
  }


  // 组件 组成页面的碎片
  // 新建文件 .vue后缀 可以被当成一个复杂的页面 ， 也可以当成提取出来的公共部分
</script>

<style >
/*公用样式*/
html,body {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
</style>
